import React, { Component, Suspense, lazy } from 'react';
import model from './model'
import './index.css'
const ImgWrapper = lazy(() => import('./ImgWrapper'));
class Pool extends Component {

    renderImg=()=>{
        let cards = []
        while(cards.length<100){
            cards.push(model.map((item,index) => (
                <div class="item" key={index}>
                    
                    <ImgWrapper src={item.image} />
                    
                    {/* <img src={item.image}  alt=""/> */}
                </div>
            )));
        }
        return cards
    }
    render() {
        return (
            <div class="masonry">
                <Suspense fallback={<div>Loading...</div>}>
                {this.renderImg()}
                </Suspense>
                    
                
            </div>
        );
    }
}

export default Pool;